<template>
  <!-- 新增和编辑优惠价格 -->
  <div>
    <el-dialog
      v-el-drag-dialog
      :title="type === 'add' ? '新增优惠价格' : '编辑优惠价格'"
      :visible.sync="visible"
      width="800px"
      @closed="reset"
    >
      <div class="center">
        <!-- 描述列表 -->
        <el-form ref="form" class="form" :model="query" label-position="right" label-width="90px">
          <el-form-item label="订单来源" prop="orderSource">
            <el-select v-model="query.orderSource" placeholder="请选择">
              <el-option
                v-for="(value, key) in orderSourceMap"
                :key="key"
                :label="value.desc"
                :value="value.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="组织机构" prop="orgId">
            <el-tree-select
              v-model="query.orgId"
              :clearable="false"
              class="tree-select"
              :popover-width="360"
              :select-params="{
                clearable: true,
                placeholder: '请选择组织机构',
                loading: $loadingPlugin.getTreeData
              }"
              :tree-params=" {
                'default-expand-all': true,
                'expand-on-click-node': false,
                'highlight-current': true,
                props:{
                  value:'orgSNNo',
                  label: 'orgName',
                  disabled: 'disabled',
                },
                data: treeData
              }"
              @node-click="selectTreeChange"
            />
          </el-form-item>
          <el-form-item label="商品分类" prop="gtName">
            <el-select v-model="query.gtName" placeholder="请选择">
              <el-option :value="0" label="不限" />
              <el-option :value="1" label="普通" />
              <el-option :value="2" label="特殊" />
              <el-option :value="3" label="白金" />
              <el-option :value="4" label="钻石" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="goodsCode">
            <el-select v-model="query.goodsCode" placeholder="请选择">
              <el-option :value="0" label="不限" />
              <el-option :value="1" label="普通" />
              <el-option :value="2" label="特殊" />
              <el-option :value="3" label="白金" />
              <el-option :value="4" label="钻石" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户类型" prop="customerType">
            <el-select v-model="query.customerType" placeholder="请选择">
              <el-option
                v-for="(value, key) in csmTypeMap"
                :key="key"
                :label="value.desc"
                :value="value.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="客户性质" prop="customerQuality">
            <el-select v-model="query.customerQuality" placeholder="请选择">
              <el-option
                v-for="(value, key) in csmQualityMap"
                :key="key"
                :label="value.desc"
                :value="value.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="有效期(起)">
            <el-date-picker
              v-model="query.startDt"
              type="datetime"
              placeholder="选择日期时间"
              @change="toDate()"
            />
          </el-form-item>
          <el-form-item label="有效期(止)">
            <el-date-picker
              v-model="query.endDt"
              type="datetime"
              placeholder="选择日期时间"
              @change="toDate()"
            />
          </el-form-item>
          <el-form-item label="优惠价格" prop="price">
            <el-input v-model="query.price" placeholder="单行输入" />
          </el-form-item>
        </el-form>
      </div>
      <!-- 底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button :loading="$loadingPlugin.add || $loadingPlugin.edit" type="primary" @click="visible = false"> 保存 </el-button>
        <el-button @click="visible = false"> 关闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import { defaultPaymentMethodMap } from '@/utils/map'

  export default {
    name: 'discounts',
    data() {
      return {
        type: 'add',
        visible: false,
        titleName: null,
        defaultPaymentMethodMap,
        treeData: [],
        query: {
          orderSource: ''
        },
        orderSourceMap: [
          { 'value': 1, 'desc': '呼叫中心', 'key': 'PHONE' },
          { 'value': 2, 'desc': '微信', 'key': 'WEIXIN' },
          { 'value': 3, 'desc': '代客下单', 'key': 'SUSER' },
          { 'value': 4, 'desc': '门店', 'key': 'OTHER' },
          { 'value': 5, 'desc': '底座', 'key': 'DZ' }
        ],
        csmQualityMap: [
          { 'value': 0, 'desc': '不限', 'key': 'BX' },
          { 'value': 1, 'desc': '普通', 'key': 'PT' },
          { 'value': 2, 'desc': '特殊', 'key': 'TS' },
          { 'value': 3, 'desc': '白金', 'key': 'BJ' },
          { 'value': 4, 'desc': '钻石', 'key': 'ZS' }
        ],
        csmTypeMap: [
          { 'value': 1, 'desc': '居民用户', 'key': 'Resident_user' },
          { 'value': 2, 'desc': '商业用户', 'key': 'Business_user' },
          { 'value': 4, 'desc': '工业用户', 'key': 'GY_user' },
          { 'value': 8, 'desc': '瓶批用户', 'key': 'BOTTLE_user' },
          { 'value': 16, 'desc': '槽批用户', 'key': 'GROOVE_user' }
        ]
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await this.getTreeData()
    },
    methods: {
      // 获取所属机构数据
      async getTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择所属机构
      selectTreeChange(value) {
        this.orgSNNo = value.orgSNNo
      },
      // 时间冲突
      toDate() {
        const startDt = this.query.startDt
        const endDt = this.query.endDt
        if (endDt < startDt) {
          this.$confirm('起始日期不能大于结束日期', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success'
              // message: '删除成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info'
              // message: '已取消删除'
            })
          })
        }
      },
      open(query) {
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          if (query) {
            this.query = Object.assign(this.query, query)
            this.type = 'edit'
          }
        })
      },
      // 关闭
      reset() {
        this.type = 'add'
        this.query = {}
        // this.$nextTick(() => {
        //   this.$refs.dataForm.clearValidate()
        // })
      }
    }
  }
</script>

<style lang='scss' scoped>
.center {
  // height: 500px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
}

.item {
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}

.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 50%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
</style>
